<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/Reset.css"/>
  <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/animate.css"/>
  <link rel="stylesheet" type="text/css" href="css/main.css"/>
  <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
  	var rem = document.documentElement.clientWidth/6.4;
  	document.getElementsByTagName('html')[0].style.fontSize = rem + 'px'; 	
  </script>
  <title>天空之城</title>
</head>
<body>
	<div class="wrapper">
		<div id="loading">
			 <ul>
        	<li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	    </ul>
	    <div>你是否已经准备好，GO....</div>
		</div>
		<canvas id="c1"></canvas>
		<div class="swiper-container" id="uList">
			<div id="list" class="clearfix swiper-wrapper">
				<div class="swiper-slide" id="page1">
					<ul id="s1">
            <li>
                <img src="images/a1.png"/>
            </li>
            <li>
                <img src="images/a2.png"/>
            </li>
            <li>
                <img src="images/a3.png"/>
            </li>
            <li>
                <img src="images/a4.png"/>
            </li>
            <li>
                <img src="images/a5.png"/>
            </li>
             <li>
                <img src="images/a6.png"/>
            </li>
        	</ul>
				</div>
				<div class="swiper-slide" id="page2">
					<ul id="s2">
            <li><img src="images/b1.png"/></li>
            <li><img src="images/b2.png"/></li>
            <li><img src="images/b3.png"/></li>
            <li><img src="images/b4.png"/></li>
            <li><img src="images/b5.png"/></li>
        	</ul>
				</div>
				<div class="swiper-slide" id="page3">
					<ul id="s3">
            <li><img src="images/c1.png"/></li>
            <li><img src="images/c2.png"/></li>
            <li><img src="images/c3.png"/></li>
            <li><img src="images/c4.png"/></li>
            <!--<li><img src="images/c5.png"/></li>-->
        	</ul>
				</div>
						
			</div>
		</div>
		
		<div id="arrow" style="display: none;"></div>
    <div id="music">
       <audio id="audio1" src="music/music.mp3" preload="auto" loop></audio>
    </div>
	</div>
</body>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>

</html>
